<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head> 
        
        <title>Facelet Title</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    </h:head>
    <h:body>
        
        <p:panel header="Ingresar Sitio Nuevo" footer="Visca el Barca!">  
        <h:form prependId="false">  
         <p:growl id="messages" showDetail="true" />  
  
<p:gmap id="gmap" center="4.5968892,-74.1151401" zoom="13" type="HYBRID"   
    style="width:1200px;height:500px"  
    model="#{insert.emptyModel}"   
    onPointClick="handlePointClick(event);"   
    widgetVar="map" />  
      
<p:dialog widgetVar="dlg" showEffect="fade">  
    
        <h:panelGrid columns="2">  
            <h:outputLabel for="title" value="Title:" />  
            <p:inputText id="title" value="#{insert.title}" />  
              
            <f:facet name="footer">  
                <p:commandButton value="Add"   
                        actionListener="#{insert.addMarker}"   
                        update="messages"   
                        oncomplete="markerAddComplete()"/>  
                <p:commandButton value="Cancel" onclick="return cancel()"/>  
            </f:facet>  
        </h:panelGrid>  
          
        <h:inputHidden id="lat" value="#{insert.lat}" />  
        <h:inputHidden id="lng" value="#{insert.lng}" />  
   
</p:dialog>  
 </h:form>  
  
<script type="text/javascript">  
    var currentMarker = null;  
  
    function handlePointClick(event) {  
        if(currentMarker === null) {  
            document.getElementById('lat').value = event.latLng.lat();  
            document.getElementById('lng').value = event.latLng.lng();  
  
            currentMarker = new google.maps.Marker({  
                position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())  
            });  
  
            PF('map').addOverlay(currentMarker);  
  
            PF('dlg').show();  
        }     
    }  
  
    function markerAddComplete() {  
        var title = document.getElementById('title');  
        currentMarker.setTitle(title.value);  
        title.value = "";  
  
        currentMarker = null;  
        PF('dlg').hide();  
    }  
  
    function cancel() {  
        PF('dlg').hide();  
        currentMarker.setMap(null);  
        currentMarker = null;  
  
        return false;  
    }  
</script>  
            </p:panel>
    </h:body>
    
</html>

